<!--
 * hi-cell - 单元格
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础使用 -->
        <module-demo title="基础使用">
            <hi-cell title="基础使用"></hi-cell>
        </module-demo>

        <!-- 左侧图标 -->
        <module-demo title="左侧图标">
            <hi-cell title="左侧图标" leftIcon="__tishi"></hi-cell>
        </module-demo>

        <!-- 显示提示 -->
        <module-demo title="显示提示">
            <hi-cell title="显示提示" leftIcon="__menu" tips="我是单元格提示"></hi-cell>
        </module-demo>

        <!-- 显示右侧图标 -->
        <module-demo title="显示右侧图标">
            <hi-cell title="显示描述" leftIcon="__gonggao" tips="我是单元格提示" rightIcon="__you"></hi-cell>
        </module-demo>

        <!-- 显示描述 -->
        <module-demo title="显示描述">
            <hi-cell title="显示描述" leftIcon="__xinpin" tips="我是单元格提示" desc="单元格描述"></hi-cell>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";
</script>

<style lang="scss" scoped>
    :deep(.module-demo__body) {
        align-items: stretch;
    }

    .hi-cell {
        width: 100%;
    }
</style>
